<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .main{
        margin: auto;
        width: 160px;
    }
    .gcode{
        width: 100%;
        height: 40px;
        background: url(bjt.jfif);
        background-size: 100%;
        text-align: center;
        line-height: 40px;
        font-size: 16pt;
        letter-spacing: 10px;
        font-style: italic;
        cursor: pointer;
        user-select: none;
    }
    #inp{
        width: 100%;
        box-sizing: border-box;
    }
    #cbt{
        width: 100%;
    }
</style>
<body>
    <div class="main">
        <div class="gcode">验证码</div>
        <input type="text" id="inp"></input>
        <button id="cbt">验证</button>
        <div class="msg"></div>
    </div>
    <script>
        var ecbt=document.querySelector('#cbt');
        var egcode=document.querySelector('.gcode');
        var einp=document.querySelector('#inp');
        var emsg=document.querySelector('.msg');
        var getcode=function(){
            // 生成0~1的随机数，小数位为16或17为，然后转36进制，从第三个字符开始，截取5个字符
            var code=Math.random().toString(36).substr(3,5);
            return code;
        }
        ecbt.onclick=function(){
            if(egcode.innerHTML==(einp.value).trim()){
                emsg.innerHTML='验证通过';
            } else{
                emsg.innerHTML='验证失败';
            }
        }
        // 点击验证码框更换验证码
        egcode.onclick=function(){
            egcode.innerHTML=getcode();
        }
        // 网页载入时出现验证码
        egcode.click();

    </script>
</body>
</html>